<!DOCTYPE html>
<html lang="en">
<head>
    <title>更换HU</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        td {
            height: 30px;
        }

        .td-right {
            width: 22%;
        }

        .td-left {
            width: 28%;
        }

        body {
            background-color: #efefef;
        }

        table, table tr th, table tr td {
            border: 1px solid rgba(68, 67, 72, 0.57);
        }

        table {
            margin-top: 16px;
            margin-bottom: 8px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        h2 {
            margin: auto;
            padding: 5px 5px;
            background-color: #cecfce;
        }

        input {
            padding: 3px 3px;
            margin: 6px 6px;
        }

        easyui-combobox {
            height: 24px;
        }

        .td-right {
            text-align: right;
            background-color: #f7f3f7;
        }

        .td-left {
            text-align: left;
            background-color: #ffffff;
        }

        body {
            min-width: 850px;
        }

        .container {
            width: 849px;
            margin: auto;
        }
        span.content {
            margin-left: 10px;
            font-size: 14px;
        }
        #submit {
            background-color: rgba(51, 153, 255, 1);
            width: 300px;
            height: 26px;
            display: block;
            margin: 5px auto;
            border-radius: 5px;
            cursor: pointer;
            line-height: 26px;
            text-decoration: none;
            color: white;
            text-align: center;
            font-size: 12px;
        }
        #messageBox {
            padding: 0px 15px;
            min-width: 150px;
            height: 50px;
            background-color: #ddd;
            border-radius: 10px;
            line-height: 50px;
            border: #999 solid 1px;
            position: absolute;
            left: 40%;
            top: -70px;
            opacity: 0.8;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="usersDataForm" method="post" novalidate>
        <table style="border-collapse: collapse;">
            <tr>
                <td colspan="4">
                    <h2>车辆信息</h2>
                </td>
            </tr>
            <tr>
                <td class="td-right">
                    <span>品牌：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vtypeBrand"></span>
                </td>
                <td class="td-right">
                    <span>配置：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vtypeConfig"></span>
                </td>
            </tr>
            <tr>
                <td class="td-right">
                    <span>车架号：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vin"></span>
                </td>
                <td class="td-right">
                    <span>发动机号：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="engineno"></span>
                </td>
            </tr>
            <tr>

                <td class="td-right">
                    <span>颜色：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="color"></span>
                </td>
                <td class="td-right">
                    <span>T服务状态：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="tsstate"></span>
                    <input type="button" id="refreshTStatus" onclick="getVehicleInfo1()" value="重试" />
                </td>
            </tr>
            <tr class="userInfo">
                <td colspan="4">
                    <h2>使用人信息</h2>
                </td>
            </tr>
            <tr class="userInfo">
                <td class="span-width tdHeight td-right">
                    <span>姓名：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="name"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>证件号码：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="idcardNo"></span>
                </td>
            </tr>
            <tr class="userInfo">
                <td class="span-width tdHeight td-right">
                    <span>车联网使用人手机号：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="phone"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <input type="button" id="sendSmsBtn" onclick="codeMessage('01')"
                           style="width: 165px"
                           value="点击获取验证码" />
                </td>
                <td class="input-td-width tdHeight td-left">
                    <input id="CODE" name="CODE"
                           style="width:50px;"
                           class="easyui-validatebox content-width" type="text"
                           data-options="required:true"
                           placeholder="验证码"
                           autocomplete="off"/>
                    <div style="display:inline-block;color:grey;font-size: 13px">验证码有效时间为5分钟</div>
                </td>
            </tr>
            <tr class="userInfo">
                <td class="span-width tdHeight td-right">
                    <span>紧急联系人手机号：</span>
                </td>
                <td class="input-td-width tdHeight td-left" colspan="3">
                    <span class="content" id="secContPhone"></span>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <h2>详情</h2>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>购车日期：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="purchaseDate"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>原HU(SN)：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="sn"></span>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>App是否注册：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="ddd"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>原SIM卡(IMSI)：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="imsi"></span>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>SIM卡状态：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="state" style="padding-left:9px;"></span>
                    <input type="button" id="refreshSimStatus" onclick="getVehicleInfo()" value="刷新" />
                </td>
                <td class="span-width tdHeight td-right">
                    <span style="color: red">*</span><span>新HU(SN)：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <input id="sn1" name="sn1" autocomplete="off" style="margin-right: 0"/>
                    <input type="button" onclick="getIMSI()" value="查询" style="margin-left: 0" />
                </td>
            </tr>
            <tr id="beforePackage">
                <td class="span-width tdHeight td-right">
                    <span>最后一次数据上报时间：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="lastTime"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>新SIM卡(IMSI)：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="imsi1"></span>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-left" colspan="4">
                    <a id ="submit" href="javascript:void(0)" class="button button-rounded button-flat-primary" onclick="submit();">提 交</a>
                </td>
            </tr>
        </table>
        <!--<span style="font-size: 12px; color: red">仅限手机号错误，更换车主请联系车联网服务中心400-666-6677</span>-->
    </form>
    <div id="messageBox"></div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="url.js"></script>
<script type="text/javascript">
    window.onload = function () {
        $('#sn1').val('')
        $('#CODE').val('')
    }
    jQuery.support.cors = true; // IE9兼容ajax跨域
    var paramsStr = window.location.search
    var baseUrl = url ||  'http://yuntest.gwm.com.cn:86' //'http://tsp_sub.gwm.com.cn' //
    var params = {
        vin: paramsStr.split('vin=')[1] ? paramsStr.split('vin=')[1].split('&')[0] : '',
        dealerNum: paramsStr.split('dealerNum=')[1] ? paramsStr.split('dealerNum=')[1].split('&')[0] : '',
        account: paramsStr.split('account=')[1] ? paramsStr.split('account=')[1].split('&')[0] : '',
        token: paramsStr.split('token=')[1] ? paramsStr.split('token=')[1].split('&')[0] : ''
    }
    var token2 = md5(params.dealerNum + decodeURI(params.account) + new Date().getFullYear() + addZero((new Date().getMonth() + 1).toString()) + addZero(new Date().getDate().toString()))
    var codeClock = 0
    var userId = ''
    var name = ''
    var tsstate = ''
    var isSale = true

    // 校验参数token是否正确MD5加密，格式 130620管理员20190716
    if (token2.toUpperCase() !== params.token) {
        window.location.href = 'error.html'
    } else {
        var colorObj = {}
        var tsstateObj = {}
        var stateObj = {}
        getAllInfo()
    }

    // 获取与车辆有关信息
    function getAllInfo () {
        // 获取车辆颜色列表
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Veh_Color',
            data: {
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    colorObj = data.data
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        // 获取T服务状态列表
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Code_tsState',
            data: {
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    tsstateObj = data.data
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        // 获取SIM卡状态列表
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Code_simStatus',
            data: {
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    stateObj = data.data
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        // 根据vin号获取用户信息
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/owner/getOwnerByVin',
            data: {
                vin: params.vin,
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200 && data.data) {
                    isSale = true
                    $('.userInfo').show()
                    for (key in data.data) {
                        $('#' + key).html(data.data[key])
                    }
                    userId = data.data.keyid
                    name = data.data.name
                } else if (data.code === 200 && !data.data) {
                    $('.userInfo').hide()
                    isSale = false
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        // 根据vin号获取套餐列表
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/vehicle/getServicepackByVin',
            data: {
                vin: params.vin,
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    if (data.data && data.data.length > 0) {
                        for (var i=0;i<data.data.length;i++) {
                            if (data.data[i].displayName) {
                                $('#beforePackage').after(
                                    '<tr><td class="span-width tdHeight td-right"><span>' + data.data[i].displayName + '（' + data.data[i].packName + '）' + '套餐开通时间：</span></td>'
                                    + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].startTime) + '</span></td>'
                                    + '<td class="span-width tdHeight td-right"><span>' + data.data[i].displayName + '（' + data.data[i].packName + '）' + '套餐结束时间：</span></td>'
                                    + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].expirationTime) + '</span></td></tr>'
                                )
                            } else {
                                $('#beforePackage').after(
                                    '<tr><td class="span-width tdHeight td-right"><span>' + data.data[i].packName + '套餐开通时间：</span></td>'
                                    + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].startTime) + '</span></td>'
                                    + '<td class="span-width tdHeight td-right"><span>' + data.data[i].packName + '套餐结束时间：</span></td>'
                                    + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].expirationTime) + '</span></td></tr>'
                                )
                            }
                        }
                    }
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        // 根据vin查询车辆最后一次车况数据
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/vehicle/lastVehicleCondition',
            data: {
                vin: params.vin,
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data && data.data) {
                    var stamp = data.data.editTime
                    var timeStr = stamp.split('.')[0];
                    $('#lastTime').html(timeStr)
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
        getVehicleInfo()
    }
    // 根据vin号获取车辆信息
    function getVehicleInfo () {
        $('#state').html('') // 为了SIM卡状态有刷新的感觉
        $.ajax({
            async: true,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/vehicle/getVehicleAllInfoByVin',
            data: {
                vin: params.vin,
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200 && data.data) {
                    if (data.data.vehicleDto) {
                        $('#vtypeBrand').html(data.data.vehicleDto.vtypeBrand)
                        $('#vtypeConfig').html(data.data.vehicleDto.vtypeConfig)
                        $('#vin').html(data.data.vehicleDto.vin)
                        $('#engineno').html(data.data.vehicleDto.engineno)
                        $('#color').html(colorObj[data.data.vehicleDto.color])
                        $('#purchaseDate').html(dateToString(data.data.vehicleDto.purchaseDate))
                    }
                    if (data.data.serviceNoPwdDto) {
                        $('#tsstate').html(tsstateObj[data.data.serviceNoPwdDto.tsstate])
                        tsstate = data.data.serviceNoPwdDto.tsstate
                    }
                    if (data.data.simDto) {
                        $('#state').html(stateObj[data.data.simDto.state])
                        $('#imsi').html(data.data.simDto.imsi)
                    }
                    if (data.data.huDto) {
                        $('#sn').html(data.data.huDto.sn)
                    }
                }
            },
            error: function (e) {
                requestError(e)
            }
        })
    }
    function getVehicleInfo1 () {
        $('#tsstate').html('')
        tsstate = ''
        getVehicleInfo()
    }
    // 发送和校验验证码短信
    function codeMessage (type, code) {
        if (tsstate !== '2' && tsstate !== '4') {
            showMessage('只有激活状态和已过期状态的车辆可以更换HU')
            return
        }
        if (codeClock > 0 && type === '01') {
            return
        }
        $.ajax({
            async: true,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/tsp/request4Tsp',
            data: {
                phone:$('#phone').html(),
                code: code || '0',
                requestType: type,
                dealerNum: params.dealerNum,
                account: params.account,
                token: params.token
            },
            dataType: 'json',
            success: function (data) {
                if (data.data.result === 'success') {
                    if (type === '01') {
                        showMessage('验证码发送成功')
                        countSecond()
                    } else {
                        if (userId === '') {
                            showMessage('未查询到车主信息')
                        } else {
                            changeHU()
                        }
                    }
                } else {
                    if (type === '01') {
                        showMessage('验证码发送失败')
                        countSecond()
                    } else {
                        showMessage('验证码不正确')
                    }
                }
            },
            error: function (e) {
                if (type === '01') {
                    showMessage('验证码发送失败')
                    countSecond()
                } else {
                    showMessage('验证码不正确')
                    countSecond()
                }
                requestError(e)
            }
        })
    }
    /**
     * 更换HU
     */
    function submit() {
        if (isSale) {
            codeMessage('02', $('#CODE').val())
        } else {
            changeHU()
        }
    }
    function changeHU () {
        $.ajax({
            async: false,
            type: 'POST',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/replaceHu/updateHu?' + 'dealerNum=' + params.dealerNum + '&account=' + params.account + '&token=' + params.token,
            data: JSON.stringify({
                source: '1',
                vin: params.vin,
                sn: $('#sn1').val()
            }),
            dataType: 'json',
            success: function (data) {
                if (data && data.code === 200) {
                    showMessage('更换HU成功')
                } else {
                    showMessage('更换HU失败')
                }
            },
            error: function (e) {
                showMessage(e.responseJSON.message)
            }
        })
    }
    // 请求报错
    function requestError (e) {
        console.log(e)
    }
    // 时间戳转字符串
    function dateToString (stamp) {
        if (stamp) {
            var date = new Date(stamp)
            return date.getFullYear() + '-' + addZero((date.getMonth() + 1).toString()) + '-' + addZero(date.getDate().toString())
        } else {
            return ''
        }
    }
    // 提示信息
    function showMessage (content) {
        if($('#messageBox').css('top') === '-70px') {
            $('#messageBox').html(content)
            $('#messageBox').animate({top: '70px'})
            setTimeout(function () {
                $('#messageBox').animate({top: '-70px'})
            }, 4000)
        }
    }
    // 发送验证码倒计时
    function countSecond () {
        codeClock = 30
        $('#sendSmsBtn').val('点击获取验证码（' + codeClock + '）')
        var tInterval = setInterval(function () {
            if (codeClock > 0) {
                codeClock--
                $('#sendSmsBtn').val('点击获取验证码（' + codeClock + '）')
            } else {
                $('#sendSmsBtn').val('点击获取验证码')
                clearInterval(tInterval)
            }
        }, 1000)

    }
    // 根据HU获取IMSI
    function getIMSI () {
        if ($('#sn1').val().trim() === '') {
            showMessage('请输入SN号')
            return
        }
        $.ajax({
            async: false,
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            url: baseUrl + '/boss/openapi/replaceHu/getHuBySn?' + 'dealerNum=' + params.dealerNum + '&account=' + params.account + '&token=' + params.token,
            data: {
                sn: $('#sn1').val()
            },
            dataType: 'json',
            success: function (data) {
                if (data.code === 200 && data.data && data.data.imsi) {
                    $('#imsi1').html(data.data.imsi)
                } else {
                    $('#imsi1').html('')
                }
            },
            error: function (e) {
                showMessage(e.responseJSON.message)
            }
        })
    }
    // 月份日期补零
    function addZero (val) {
        return val.length === 1 ? '0' + val : val
    }

</script>

</body>
</html>
